import React, { useState, useEffect } from 'react'

import { bindActionCreators, Dispatch } from "redux"
import { connect, useDispatch, useSelector, useStore } from "react-redux"
import * as Actions from "../../../store/action"
import { SETLISTTYPE, ALLSTATE, LISTITEM, SETLISTDATA } from "../../../types/store.d"
import request from "../../../untils/request"
import "../../../api/index"

interface MYPROPS {
  setList: (params: string) => void
  name: string;
  listData: LISTITEM[];
  setListData: (params: LISTITEM[]) => void
}

function Home(props: MYPROPS) {
  const hookDispatch = useDispatch()
  const { listData } = props
  const title = useSelector((state: ALLSTATE) => {
    return state.testData
  })
  const newList = useSelector((state: ALLSTATE) => {
    return state.list
  })
  console.log(title, "title");

  console.log(props.name, "name");
  useEffect(() => {
    request.get("/api/list").then(res => {
      props.setListData(res.data.list)
    })
  }, [])

  return (
    <div>
      {
        newList && newList.map((item, index) => {
          return (<p key={index}>{item.title}</p>)
        })
      }
    </div>
  )
}


const mapStateToProps = (state: ALLSTATE) => ({
  name: state.testData
})
const mapDispatchToProps = (dispatch: Dispatch) => {
  return { ...bindActionCreators(Actions, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)

// reduxmap